<template>
    <el-row style="height: 100%">
      <el-col :span="24">
        <el-radio-group v-model="pageAbout.type" class="m-b">
          <template v-for="item in pageAbout.types" :key="item.value">
            <el-radio-button :label="item.value">{{ item.label }}</el-radio-button>
          </template>
        </el-radio-group>
      </el-col>
      <!-- //设备数据展示 -->
      <el-col :span="24">
        <div class="type-one" v-if="pageAbout.type === 1">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="站点" prop="stationId">
              <el-select
                v-model="queryMutiParams.stationId"
                multiple
                collapse-tags
                collapse-tags-tooltip
                :max-collapse-tags="4"
                placeholder="请选择场站"
                style="width: 200px"
              >
                <el-option
                  v-for="item in stationList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="设备类型" prop="deviceType">
              <el-select
                v-model="queryMutiParams.deviceType"
                placeholder="请选择告警设备类型"
                clearable
                class="!w-240px"
              >
                <el-option
                  v-for="(item, index) in deviceTypeData"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="设备名称" prop="alarmName">
              <el-select
                v-model="queryMutiParams.alarmName"
                placeholder="请选择设备名称"
                clearable
                class="!w-240px"
              >
                <el-option
                  v-for="(item, index) in getIntDictOptions(DICT_TYPE.DEVICE_NAME)"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="创建时间 :" prop="timeFrame">
              <el-date-picker
                v-model="queryMutiParams.timeFrame"
                :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
                class="!w-240px"
                end-placeholder="结束日期"
                start-placeholder="开始日期"
                type="daterange"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
  
            <el-button plain type="primary">
              <Icon class="mr-5px" icon="ep:search" />
              搜索
            </el-button>
            <el-button plain type="primary"> 导出 </el-button>
            <el-popover
              placement="bottom-start"
              :width="170"
              trigger="click"
              popper-class="addformPanel"
              popper-style="background-color: #243340 !important"
            >
              <template #reference>
                <el-button plain type="primary">列表配置 </el-button>
              </template>
              <el-checkbox
                :indeterminate="isIndeterminate"
                v-model="checkAll"
                @change="handleCheckAllChange"
                >全选</el-checkbox
              >
              <el-checkbox-group v-model="checkList" @change="handleCheckedCitiesChange">
                <el-checkbox
                  v-for="item in customCheckbox"
                  :label="item"
                  :key="item"
                  style="display: block; margin: 9px 20px"
                  >{{ item }}</el-checkbox
                >
              </el-checkbox-group>
            </el-popover>
          </el-form>
          <el-table
            ref="historyList"
            :data="historyList"
            border
            :header-cell-style="{
              borderRight: 'none',
              borderBottom: 'none'
            }"
            :cell-style="{ border: 'none' }"
            style="width: 100%"
            :row-style="{ height: '48.5px', width: '48.5px' }"
            class="custom-table"
            @select="tableDataSelect"
            @select-all="tableDataSelectAll"
          >
            <el-table-column
              v-for="(item, index) in tableColList"
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :align="item.align || 'center'"
            >
              <template #default="scope">
                <span>{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <!-- //操作历史展示 -->
      <el-col :span="24">
        <div class="type-two" v-if="pageAbout.type === 2">
          <el-col :span="24">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="站点" prop="stationId">
                <el-select
                  v-model="queryMutiParams.stationId"
                  multiple
                  collapse-tags
                  collapse-tags-tooltip
                  :max-collapse-tags="4"
                  placeholder="请选择场站"
                  style="width: 200px"
                >
                  <el-option
                    v-for="item in stationList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="设备名称" prop="alarmName">
                <el-select
                  v-model="queryMutiParams.alarmName"
                  placeholder="请选择设备名称"
                  clearable
                  class="!w-240px"
                >
                  <el-option
                    v-for="(item, index) in getIntDictOptions(DICT_TYPE.DEVICE_NAME)"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="告警状态" prop="alarmLevel">
                <el-select
                  v-model="queryMutiParams.alarmLevel"
                  placeholder="请选择告警状态"
                  clearable
                  class="!w-240px"
                >
                  <el-option
                    v-for="(item, index) in getIntDictOptions(DICT_TYPE.ALARM_LEVEL)"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="操作内容">
                <el-input v-model="formInline.user" placeholder="请输入内容" clearable />
              </el-form-item>
              <el-form-item label="创建时间 :" prop="timeFrame">
                <el-date-picker
                  v-model="queryMutiParams.timeFrame"
                  :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
                  class="!w-240px"
                  end-placeholder="结束日期"
                  start-placeholder="开始日期"
                  type="daterange"
                  value-format="YYYY-MM-DD HH:mm:ss"
                />
              </el-form-item>
  
              <el-button @click="handleQuery">
                <Icon class="mr-5px" icon="ep:search" />
                搜索
              </el-button>
            </el-form>
            <el-table
              :data="tableData3"
              border
              :header-cell-style="{
                borderRight: 'none',
                borderBottom: 'none'
              }"
              :cell-style="{ border: 'none' }"
              style="width: 100%"
              ref="table"
              :row-style="{ height: '48.5px', width: '48.5px' }"
              class="custom-table"
              ><el-table-column prop="no" label="序号" align="center" />
              <el-table-column prop="content" label="操作内容" align="center" />
              <el-table-column prop="state" label="状态" align="center" />
              <el-table-column prop="time" label="操作时间" align="center" />
              <el-table-column prop="operator" label="操作人" align="center" />
            </el-table>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </template>
  
  <script lang="ts" setup>
  import { getALLDeviceTypeDictList } from '@/api/EMS/deviceMana/deviceType'
  import * as StaticsApi from '@/api/EMS/statistics/electricity/index'
  import * as StationApi from '@/api/EMS/station/index'
  import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
  import { onMounted, ref } from 'vue'
  const loading = ref(true) // 列表的加载中
  const historyList = ref([]) //场站选项列表
  const queryMutiParams = reactive({
    timeFrame: [],
    stationId: [],
    stationTotalNum: undefined,
    name: '',
    alarmName: null,
    deviceType: null,
    alarmLevel: null,
    alarmStatus: null,
    editDialogVisible: false,
    editedRowData: {}
  })
  const stationList = ref([])
  //获取设备类型
  const deviceTypeData = ref([])
  const deviceTypeDataMap = reactive(new Map())
  const getDeviceTypeData = async () => {
    const params = {} // 如果需要，填充参数
    const data = await getALLDeviceTypeDictList(params)
  
    // 检查返回的 data 是否有效
    console.log('Returned data:', data)
    deviceTypeData.value = [...deviceTypeData.value, ...data]
    data.forEach((val) => {
      deviceTypeDataMap.set(String(val.value), val)
    })
  }
  //场站电表历史数据请求参数
  const querySationParams = reactive({
    pageNo: 1,
    pageSize: 10,
    stationId: null,
    deviceId: null,
    tenantId: null,
    tsList: [],
    idList: []
  })
  /** 查询电表历史数据表 */
  const getHistoryList = async () => {
    loading.value = true
    try {
      const params = {
        pageNo: 1,
        pageSize: 10,
        stationId: null,
        deviceId: null,
        tenantId: null,
        tsList: [],
        idList: []
      }
      params.pageNo = querySationParams.pageNo
      params.pageSize = querySationParams.pageSize
      params.stationId = querySationParams.stationId
      params.deviceId = querySationParams.deviceId
      params.tenantId = querySationParams.tenantId
      params.tsList = querySationParams.tsList
      params.idList = querySationParams.idList
  
      const data = await StaticsApi.getHistoryData(params)
      //清空数据
      historyList.value.length = 0
      historyList.value = [...historyList.value, ...data.list]
    } finally {
      loading.value = false
    }
  }
  //获取告警状态
  const alarmStatusMap = reactive(new Map())
  const getAlarmStatusMap = () => {
    const data = getIntDictOptions(DICT_TYPE.ALARM_RULE_STATION_ALARM_STATUS)
    data.forEach((val) => {
      alarmStatusMap.set(String(val.value), val)
    })
    console.warn(alarmStatusMap)
  }
  /** 查询场站类型列表 */
  const getStationList = async () => {
    const param = {}
    const data = await StationApi.getStationDictList(param)
    stationList.value = [...stationList.value, ...data]
  }
  const pageAbout = ref({
    types: [
      {
        value: 1,
        label: '设备数据'
      },
      {
        value: 2,
        label: '操作历史'
      }
    ],
    type: 1
  })
  const tableData2 = [
    {
      time: '2023-10-11',
      name: '防逆流电表',
      number: '12345678',
      avoltage: '228.3',
      bvoltage: '227.5',
      cvoltage: '226.9',
      abvoltage: '440',
      bcvoltage: '456',
      cavoltage: '444',
      acurrent: '100.6',
      bcurrent: '103.8',
      ccurrent: '101',
      areactivepower: '-1.4',
      breactivepower: '-1.6',
      creactivepower: '-1.6'
    },
  
    {
      time: '',
      name: '',
      number: '',
      avoltage: '',
      bvoltage: '',
      cvoltage: '',
      abvoltage: '',
      bcvoltage: '',
      cavoltage: '',
      acurrent: '',
      bcurrent: '',
      ccurrent: '',
      areactivepower: '',
      breactivepower: '',
      creactivepower: ''
    },
  
    {
      time: '',
      name: '',
      number: '',
      avoltage: '',
      bvoltage: '',
      cvoltage: '',
      abvoltage: '',
      bcvoltage: '',
      cavoltage: '',
      acurrent: '',
      bcurrent: '',
      ccurrent: '',
      areactivepower: '',
      breactivepower: '',
      creactivepower: ''
    },
    {
      time: '',
      name: '',
      number: '',
      avoltage: '',
      bvoltage: '',
      cvoltage: '',
      abvoltage: '',
      bcvoltage: '',
      cavoltage: '',
      acurrent: '',
      bcurrent: '',
      ccurrent: '',
      areactivepower: '',
      breactivepower: '',
      creactivepower: ''
    },
    {
      time: '',
      name: '',
      number: '',
      avoltage: '',
      bvoltage: '',
      cvoltage: '',
      abvoltage: '',
      bcvoltage: '',
      cavoltage: '',
      acurrent: '',
      bcurrent: '',
      ccurrent: '',
      areactivepower: '',
      breactivepower: '',
      creactivepower: ''
    },
    {
      time: '',
      name: '',
      number: '',
      avoltage: '',
      bvoltage: '',
      cvoltage: '',
      abvoltage: '',
      bcvoltage: '',
      cavoltage: '',
      acurrent: '',
      bcurrent: '',
      ccurrent: '',
      areactivepower: '',
      breactivepower: '',
      creactivepower: ''
    },
    {
      time: '',
      name: '',
      number: '',
      avoltage: '',
      bvoltage: '',
      cvoltage: '',
      abvoltage: '',
      bcvoltage: '',
      cavoltage: '',
      acurrent: '',
      bcurrent: '',
      ccurrent: '',
      areactivepower: '',
      breactivepower: '',
      creactivepower: ''
    },
    {
      time: '',
      name: '',
      number: '',
      avoltage: '',
      bvoltage: '',
      cvoltage: '',
      abvoltage: '',
      bcvoltage: '',
      cavoltage: '',
      acurrent: '',
      bcurrent: '',
      ccurrent: '',
      areactivepower: '',
      breactivepower: '',
      creactivepower: ''
    },
    {
      time: '',
      name: '',
      number: '',
      avoltage: '',
      bvoltage: '',
      cvoltage: '',
      abvoltage: '',
      bcvoltage: '',
      cavoltage: '',
      acurrent: '',
      bcurrent: '',
      ccurrent: '',
      areactivepower: '',
      breactivepower: '',
      creactivepower: ''
    }
  ]
  const tableData3 = [
    {
      no: '1',
      content: '防逆流电表',
      state: '操作内容（虚拟电厂标明接收指令/下发指令）',
      time: '2023年5月16日14：10：22',
      operator: 'jr1'
    },
  
    {
      no: '',
      content: '',
      state: '',
      time: '',
      operator: ''
    },
    {
      no: '',
      content: '',
      state: '',
      time: '',
      operator: ''
    },
    {
      no: '',
      content: '',
      state: '',
      time: '',
      operator: ''
    },
    {
      no: '',
      content: '',
      state: '',
      time: '',
      operator: ''
    }
  ]
  const formInline = ref({
    user: '',
    region: '',
    date: ''
  })
  const checkList = ref([
    '采集时间',
    '当前组合有功总电能',
    '累计总放电量-当前正向总有功电能',
    '累计总充电量-当前反向总有功电能',
    '当前组合无功总电能',
    '当前正向总无功电能',
    'A相电压',
    'B相电压',
    'C相电压',
    'A相电流',
    'B相电流',
    'C相电流',
    'A-B线电压',
    'C-B线电压',
    'A-C线电压',
    '正向有功最大需量',
    '反向有功最大需量',
    '正向无功最大需量',
    '反向无功最大需量',
    'A相正向有功电能',
    'B相正向有功电能',
    'C相正向有功电能',
    '电压变比 PT',
    '电流变比 CT',
    '电压不平衡度',
    '电流不平衡度',
    'A相有功功率',
    'B相有功功率',
    'C相有功功率',
    '总有功功率',
    'A相无功功率',
    'B相无功功率',
    'C相无功功率',
    '总无功功率',
    'A相视在功率',
    'B相视在功率',
    'C相视在功率',
    '总视在功率',
    'A相功率因数',
    'B相功率因数',
    'C相功率因数',
    '总功率因数',
    '租户标识',
    '场站编号',
    '设备 ID'
  ])
  const customCheckbox = ref([
    '采集时间',
    '当前组合有功总电能',
    '累计总放电量-当前正向总有功电能',
    '累计总充电量-当前反向总有功电能',
    '当前组合无功总电能',
    '当前正向总无功电能',
    'A相电压',
    'B相电压',
    'C相电压',
    'A相电流',
    'B相电流',
    'C相电流',
    'A-B线电压',
    'C-B线电压',
    'A-C线电压',
    '正向有功最大需量',
    '反向有功最大需量',
    '正向无功最大需量',
    '反向无功最大需量',
    'A相正向有功电能',
    'B相正向有功电能',
    'C相正向有功电能',
    '电压变比 PT',
    '电流变比 CT',
    '电压不平衡度',
    '电流不平衡度',
    'A相有功功率',
    'B相有功功率',
    'C相有功功率',
    '总有功功率',
    'A相无功功率',
    'B相无功功率',
    'C相无功功率',
    '总无功功率',
    'A相视在功率',
    'B相视在功率',
    'C相视在功率',
    '总视在功率',
    'A相功率因数',
    'B相功率因数',
    'C相功率因数',
    '总功率因数',
    '租户标识',
    '场站编号',
    '设备 ID'
  ])
  const tableCol = ref([
    { isshow: true, prop: 'ts', label: '采集时间', align: 'center' },
    { isshow: true, prop: 'emCombE', label: '当前组合有功总电能', align: 'center' },
    { isshow: true, prop: 'emPositiveE', label: '累计总放电量-当前正向总有功电能', align: 'center' },
    { isshow: true, prop: 'emReversedE', label: '	累计总充电量-当前反向总有功电能', align: 'center' },
    { isshow: true, prop: 'emCombQE', label: '当前组合无功总电能', align: 'center' },
    { isshow: true, prop: 'emPositiveQE', label: '当前正向总无功电能', align: 'center' },
    { isshow: true, prop: 'emUa', label: 'A相电压', align: 'center' },
    { isshow: true, prop: 'emUb', label: 'B相电压', align: 'center' },
    { isshow: true, prop: 'emUc', label: 'C相电压', align: 'center' },
    { isshow: true, prop: 'emIa', label: 'A相电流', align: 'center' },
    { isshow: true, prop: 'emIb', label: 'B相电流', align: 'center' },
    { isshow: true, prop: 'emIc', label: 'C相电流', align: 'center' },
    { isshow: true, prop: 'emUab', label: 'A-B线电压', align: 'center' },
    { isshow: true, prop: 'emUcb', label: 'C-B线电压', align: 'center' },
    { isshow: true, prop: 'emUac', label: 'A-C线电压', align: 'center' },
    { isshow: true, prop: 'emPositivePowerMaxDemand', label: '正向有功最大需量', align: 'center' },
    { isshow: true, prop: 'emReversedPowerMaxDemand', label: '反向有功最大需量', align: 'center' },
    { isshow: true, prop: 'emPositiveRePowerMaxDemand', label: '正向无功最大需量', align: 'center' },
    { isshow: true, prop: 'emReversedRePowerMaxDemand', label: '反向无功最大需量', align: 'center' },
    { isshow: true, prop: 'emPositiveEa', label: 'A相正向有功电能', align: 'center' },
    { isshow: true, prop: 'emPositiveEb', label: 'B相正向有功电能', align: 'center' },
    { isshow: true, prop: 'emPositiveEc', label: 'C相正向有功电能', align: 'center' },
    { isshow: true, prop: 'emPT', label: '电压变比 PT', align: 'center' },
    { isshow: true, prop: 'emCT', label: '电流变比 CT', align: 'center' },
    { isshow: true, prop: 'voltageImbalance', label: '电压不平衡度', align: 'center' },
    { isshow: true, prop: 'currentImbalance', label: '电流不平衡度', align: 'center' },
    { isshow: true, prop: 'emPa', label: 'A相有功功率', align: 'center' },
    { isshow: true, prop: 'emPb', label: 'B相有功功率', align: 'center' },
    { isshow: true, prop: 'emPc', label: 'C相有功功率', align: 'center' },
    { isshow: true, prop: 'emP', label: '总有功功率', align: 'center' },
    { isshow: true, prop: 'emQa', label: 'A相无功功率', align: 'center' },
    { isshow: true, prop: 'emQb', label: 'B相无功功率', align: 'center' },
    { isshow: true, prop: 'emQc', label: 'C相无功功率', align: 'center' },
    { isshow: true, prop: 'emQ', label: '总无功功率', align: 'center' },
    { isshow: true, prop: 'emSa', label: 'A相视在功率', align: 'center' },
    { isshow: true, prop: 'emSb', label: 'B相视在功率', align: 'center' },
    { isshow: true, prop: 'emSc', label: 'C相视在功率', align: 'center' },
    { isshow: true, prop: 'emS', label: '总视在功率', align: 'center' },
    { isshow: true, prop: 'emPFa', label: 'A相功率因数', align: 'center' },
    { isshow: true, prop: 'emPFb', label: 'B相功率因数', align: 'center' },
    { isshow: true, prop: 'emPFc', label: 'C相功率因数', align: 'center' },
    { isshow: true, prop: 'emPF', label: '总功率因数', align: 'center' },
    { isshow: true, prop: 'tenantId', label: '租户标识', align: 'center' },
    { isshow: true, prop: 'stationId', label: '场站编号', align: 'center' },
    { isshow: true, prop: 'deviceId', label: '设备 ID', align: 'center' }
  ])
  const checkAll = ref(true)
  const isIndeterminate = ref(false) //是否全选 全选-true，半选/不选-false
  //用于实现全选，是否半选 全选/不选-false，半选-true
  const selectList = ref([])
  const queryParams = ref([
    {
      createTime: []
    }
  ])
  
  const tableColList = ref(tableCol.value.filter((item) => item.isshow))
  /** 搜索按钮操作 */
  const handleQuery = () => {
    getHistoryList()
  }
  // 监控data中的数据变化
  watch(
    () => queryParams.value,
    (newV) => {
      this.test = newV
    }
  )
  
  // 方法集合
  const handleCheckAllChange = (val: boolean) => {
    checkList.value = val ? customCheckbox.value : []
    isIndeterminate.value = false
    handleTableCol()
    getHistoryList()
  }
  
  const handleCheckedCitiesChange = () => {
    const checkedCount = checkList.value.length
    checkAll.value = checkedCount === customCheckbox.value.length
    isIndeterminate.value = checkedCount > 0 && checkedCount < customCheckbox.value.length
    console.log('this.checkAll', checkAll.value, isIndeterminate.value)
    handleTableCol()
  }
  
  const handleTableCol = () => {
    tableCol.value.forEach((item) => {
      //遍历第一层，isshow 展示不展示
      item.isshow = checkList.value.indexOf(item.label) > -1
    })
    $refs.value.historyList.doLayout()
  }
  
  const tableDataSelect = (e: any) => {
    console.log('选择表格', e)
    selectList.value = e
  }
  
  const tableDataSelectAll = (e: any) => {
    console.log('全选表格', e)
    selectList.value = e
  }
  onMounted(async () => {
    await getStationList()
    await getDeviceTypeData()
    await getAlarmStatusMap()
    await getHistoryList()
  })
  </script>
  
  <style lang="scss">
  .addformPanel {
    max-height: 400px;
    overflow-y: auto;
    background-color: #243340;
  }
  </style>
  
  <style lang="scss" scoped>
  .el-button {
    width: 168px;
    display: flex;
    margin-bottom: 10px;
    margin-top: -0px;
  }
  .demo-form-inline {
    margin-top: 20px;
    display: flex;
    flex-flow: wrap;
  }
  .icon {
    float: right;
    margin-top: 10px;
  }
  .custom-table {
    border: 1px dashed rgba(164, 185, 211, 0.8);
    display: flex;
  }
  
  ::v-deep .el-table {
    thead tr,
    tbody tr {
      td:nth-child(3),
      th:nth-child(3) {
        border-right: 1px dashed rgba(164, 185, 211, 0.8) !important;
      }
    }
  }
  ::v-deep .el-table th.is-leaf {
    border: none;
    font-size: 16px;
    font-weight: 400;
    color: rgba(164, 185, 211, 0.8);
  }
  </style>
  